<template>
  <div class="my" @touchstart="start($event)" @touchend="end" @touchmove="move($event)">
    <!-- 头部 -->
    <div class="top">
      <img src="../assets/281578538336_.pic_hd.e816ad71.jpg" ref="image">
    </div>
    <more_icon @profileme="profileme" @zx="zx" />
    <div class="main" ref="main">
      <!-- 头像 -->
      <div class="img">
        <img :src="'http://43.138.15.137:3000' + UserInfo.userAvatar" alt="">
      </div>
      <div style="height: 35px; width: 100%;background-color: #000;"></div>
      <div class="decs">
        <p>{{ UserInfo.userNickname }}</p>
        <p class="doyin">抖音号：{{ UserInfo.id }}</p>
        <p class="doyin" style="color: #8b8c96;margin-top: 8px;margin-left: -5px;">{{ UserInfo.userDesc }}</p>
        <!-- 性别和年龄 -->
        <label_icon :label="UserInfo.userGender" :age="UserInfo.userAge" />
        <!-- 数量 -->
        <div class="shu">
          <div class="num">{{ beLikesNum }}获赞</div>
          <div class="num" @click="gz">{{ CareNum }}关注</div>
          <div class="num" @click="fs">{{ FansNum }}粉丝</div>
        </div>
      </div>
      <div class="box">
        <!-- 标签切换 -->
        <div class="title">
          <div class="title1" @click="works" :class="title === 0 ? 'color' : ''">
            <div class="hover" v-if="title === 0"></div>作品&nbsp;{{ VideoNum }}
          </div>
          <div class="title1" @click="trends" :class="title === 1 ? 'color' : ''">
            <div class="hover" v-if="title === 1"></div>动态&nbsp;{{ VideoNum }}
          </div>
          <div class="title1" @click="Likes" :class="title === 2 ? 'color' : ''">
            <div class="hover" v-if="title === 2"></div>喜欢&nbsp;{{ LikesNum }}
          </div>
        </div>
        <div style="height: 23px; width: 100%;background-color: #000;"></div>
        <!-- 作品视频 -->
        <div class="video-box" v-if="title === 0">
          <video_part :Arr="videosArr" />
          <div style="height: 41px;width: 100%;"></div>
        </div>
        <!-- 动态 -->
        <div class="video-box" v-if="title === 1">
          <Async_trends_part :item="videosDTArr" :isliked="isliked" :flag="flag" :title="title1" :plArr="plArr"
            @stop="stop" @love="love" @message="message" @ok="ok" name="my" />
          <div style="height: 41px;width: 100%;"></div>
        </div>
        <!-- 喜欢视频 -->
        <div class="video-box" v-if="title === 2">
          <video_part :Arr="videos1Arr" />
          <div style="height: 41px;width: 100%;"></div>
        </div>
      </div>
    </div>
    <keep-alive>
      <Async_ProfileMy_page />
    </keep-alive>
  </div>
</template>

<script setup>
import axios from 'axios'
import { defineAsyncComponent, ref } from 'vue'
import { getMyVideoAPI, getMyVideo1API, getMyVideoNumAPI, getMyLikesNumAPI, getMyCareNumAPI, getMyFansNumAPI, getMybeLikesNumAPI, getUserInfo } from '../api/My-page.js'
import { gettriggerLikeAPI, getVideoCommentAPI, postcommentVideo } from '../api/Followed-page'
// 视频组件
import video_part from '../components/common/video-part.vue'
// 动态组件
const Async_trends_part = defineAsyncComponent(() => import('../components/common/trends-part.vue'))
// 性别年龄组件
import label_icon from '../components/common/icon/label-icon.vue'
// 更多组件
import more_icon from '../components/common/icon/more-icon.vue'
// 个人组件
const Async_ProfileMy_page = defineAsyncComponent(() => import('./profilemy-page.vue'))
// 我的id
const myId = JSON.parse(localStorage.getItem('data')).userId
import { useRouter } from 'vue-router'

let router = useRouter()
// 当前用户的作品视频
const videosArr = ref([])
// 当前用户的喜欢视频
const videos1Arr = ref([])
// 当前用户的动态视频
const videosDTArr = ref([])
// 当前用户的作品视频数量
const VideoNum = ref(0)
// 当前用户的作品视频数量
const LikesNum = ref(0)
// 当前用户的关注数量
const CareNum = ref(0)
// 当前用户的粉丝数量
const FansNum = ref(0)
// 当前用户的获赞数量
const beLikesNum = ref(0)
// 当前用户的获赞数量
const UserInfo = ref({})
// 标题
const title = ref(0)
// 结束位置
const wei = ref(0)
// 开始位置
const startwei = ref(0)
// 移动距离
const movewei = ref(0)
const image = ref(null)
const main = ref(null)
// 是否喜欢集合
const isliked = ref([])
const flag = ref(false)
const title1 = ref('')
// 评论数组
const plArr = ref([])
const videoId = ref('')

initProfile()
async function initProfile() {
  // 我的id
  console.log(myId, 'myId')
  // 用户信息
  let userinfo = await getUserInfo(myId)
  // 当前用户的作品数量
  let UserNum = await getMyVideoNumAPI(myId)
  // 当前用户的喜欢数量
  let LikesRes = await getMyLikesNumAPI(myId)
  // 当前用户的关注数量
  let CareRes = await getMyCareNumAPI(myId)
  // 当前用户的粉丝数量
  let FansRes = await getMyFansNumAPI(myId)
  // 当前用户的获赞数量
  let beLikesRes = await getMybeLikesNumAPI(myId)
  works()
  LikesNum.value = LikesRes.data.data
  UserInfo.value = userinfo.data.data
  beLikesNum.value = beLikesRes.data.data
  FansNum.value = FansRes.data.data
  CareNum.value = CareRes.data.data
  VideoNum.value = UserNum.data.data
  console.log(UserInfo.value, 'userinfo');
  console.log(FansNum.value, '当前用户的粉丝数量');
  console.log(beLikesNum.value, '当前用户的获赞数量');
  console.log(VideoNum.value, '当前用户的作品视频数量');
  console.log(CareNum.value, '当前用户的关注数量');
  console.log(LikesNum.value, '当前用户的喜欢视频数量');
}
// 作品视频
async function works() {
  title.value = 0
  // 当前用户作品视频信息
  let res = await getMyVideoAPI(myId)
  videosArr.value = res.data.data
  console.log(videosArr.value, '当前用户的作品视频');
}

// 动态视频
async function trends() {
  title.value = 1
  // 当前用户作品视频信息
  let res = await getMyVideoAPI(myId)
  videosDTArr.value = res.data.data
  videosDTArr.value.forEach((item) => {
    axios.get(`api/user/${myId}/isLiked/${item.Video.videoId}`).then((res) => {
      isliked.value.push(res.data.data)
      item.loveFlag = res.data.data
    })
  })
  console.log(videosDTArr.value, '当前用户的动态视频和是否喜欢');
}

// 点击停止或者播放
async function stop(index, videoDom) {
  console.log(videoDom[index].paused);
  // 如果是暂停
  if (videoDom[index].paused) {
    for (let i = 0; i < videoDom.length; i++) {
      videoDom[i].pause()
      videoDom[i].muted = true
    }
    videoDom[index].play()
    // 关闭静音
    videoDom[index].muted = false
    // 如果是开始
  } else {
    videoDom[index].pause()
    // 打开静音
    videoDom[index].muted = true
  }
}

// 爱心
async function love(val) {
  let res = await gettriggerLikeAPI(myId, val)
  console.log(res);
  Timeout(res.data.data)
  videosDTArr.value.forEach((item) => {
    if (item.Video.videoId === val) {
      item.loveFlag = !item.loveFlag
      if (item.loveFlag) {
        item.WSLCNum.likeNum++
      } else {
        item.WSLCNum.likeNum--
      }
    }
  })
  title.value = 1
}

// Message组件简便方法
function Timeout(t) {
  flag.value = true
  title.value = t + '~'
  setTimeout(() => {
    flag.value = false
    title.value = ''
  }, 1000)
}

// 消息
async function message(val) {
  videoId.value = val
  let res = await getVideoCommentAPI(val)
  console.log(res, '评论集合');
  plArr.value = res.data.data
}

// 点击上传评论
async function ok(params) {
  let userId = JSON.parse(localStorage.getItem('data')).userId
  let res = await postcommentVideo({
    'content': params.inputValue,
    // 回复评论的id
    'replyId': params.commentIdval || '',
    // 谁发布的id
    'fromUserId': userId,
    'toVideoId': videoId.value
  })
  console.log(res);
  if (res.data.code === 200) {
    Timeout('评论成功！')
    let result = await getVideoCommentAPI(videoId.value)
    console.log(result.data.data);
    if (result.data.code === 200) {
      plArr.value = result.data.data
    }
  } else {
    Timeout('评论失败！')
  }
}
// 喜欢视频
async function Likes() {
  title.value = 2
  // 当前用户的动态视频
  let result = await getMyVideo1API(myId)
  videos1Arr.value = result.data.data
  console.log(videos1Arr.value, '当前用户的动态视频');
}

// 修改资料
async function profileme() {
  document.querySelector('.main').style.marginTop = 'none'
  document.querySelector('.profilemy').style.transform = 'translateX(0)';
}

// 注销
async function zx() {
  localStorage.clear()
  router.push('/home')
}

//进入关注页面
async function gz() {
  router.push('/interestList')
}
//进入关注页面
async function fs() {
  router.push('/fanList')
}
// 开始
async function start(e) {
  // 获取点击的位置
  startwei.value = e.changedTouches[0].clientY
  // console.log(startwei.value);
}

//移动
async function move(e) {
  // 获取移动的位置
  wei.value = e.changedTouches[0].clientY
  // console.log(wei.value);
  // 当移动大于0
  // 移动距离就等于结束点-开始点
  movewei.value = wei.value - startwei.value
  // console.log(movewei.value, '移动距离');
  // 页面高度
  let yeHeight = document.documentElement.clientHeight
  // console.log(yeHeight, '页面高度');
  // 阻尼值
  let znz = movewei.value / yeHeight
  // console.log(znz, '阻尼值');
  // console.log(image.value, main.value);
  if (movewei.value > 0) {
    image.value.style.transform = `scaleX(${1 + znz})`
    image.value.style.height = `${130 + znz * 100}px`
    image.value.style.transition = 'none'
    main.value.style.marginTop = `${130 + znz * 100}px`
    main.value.style.transition = 'none'
  }
}

// 结束
async function end() {
  if (movewei.value > 0) {
    image.value.style.transform = 'scaleX(1)'
    image.value.style.transition = 'all 0.5s'
    image.value.style.height = '130px'
    main.value.style.marginTop = '130px'
    main.value.style.transition = 'all 0.5s'
  }
}

</script>

<style lang="scss" scoped>
.my {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;

  &::-webkit-scrollbar {
    display: none;
  }
}

.top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;

  img {
    width: 100%;
  }
}

.shu {
  width: 100%;
  display: flex;
  font-size: 14px;
  margin-left: -8px;
  margin-top: 10px;

  .num {
    margin-right: 25px;
  }
}

.main {
  position: relative;
  top: 0;
  left: 0;
  margin-top: 150px;
  height: auto;
  width: 100%;
  background-color: #000;
  z-index: 10;

  &::-webkit-scrollbar {
    display: none;
  }

  .img {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 10px;
    margin-top: -20px;
    width: 90px;
    height: 90px;
    background-color: #000;
    border-radius: 50%;
    z-index: 11;

    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-top: 5px;
      margin-left: 5px;
    }
  }
}

.decs {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  margin-top: 70px;
  color: #fff;
  font-size: 18px;
  margin-left: 20px;

  .doyin {
    font-size: 12px;
  }
}

.box {
  position: relative;
  width: 100%;
  padding-top: 200px;

  .title {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 170px;
    // z-index: 10;
    display: flex;
    background-color: #000;
    width: 100%;
    height: 28px;
    padding: 12px 0px 12px 0px;
    justify-content: space-around;
    align-items: center;

    .title1 {
      position: relative;
      color: #8b8c96;
      ;
      width: 100%;
      text-align: center;
      height: 28px;
      padding: 12px 0px 6px 0px;
      font-size: 16px;

      .hover {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #face15;
      }
    }
  }
}

.color {
  color: #fff !important;
}

.video-box {
  position: relative;
  align-items: center;
  justify-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
  background-color: #000;
}
</style>